<template>
  <div class="webim-window-config">
    <el-container>
      <el-aside width="500px"><div class="left">
        <el-form ref="cssStyleForm" style="clear: both" :model="cssStyleForm" label-position="left"  label-width="120px">
          <el-form-item label="对话框皮肤：">
            <div class="chat_box">
          <span v-for="(color,index) in colors" :style="{background: color}" @click="addBack(index, color)">
            <span v-if="showBack === index" class="iconfont icon-fasongchenggong"></span>
          </span>
              <div class="wrapColor">
                <el-color-picker v-model="cssStyleForm.styleColor" @change="colorPickChange" class="fl" size="mini"></el-color-picker>
                <el-input v-model.trim="cssStyleForm.styleColor" :minlength="1" :maxlength="7" class="fl style-color-input" @blur="styleColorBlur" size="mini"></el-input>
              </div>
            </div>
          </el-form-item>
          <div class="title">网站按钮样式</div>
          <el-form-item label="按钮文案：" v-if="cssStyleForm.chatButtonLocation !== 'circle-left' && cssStyleForm.chatButtonLocation !== 'circle-right'">
            <el-input v-model.trim="cssStyleForm.onlineText" size="mini" style="width: 280px"></el-input>
          </el-form-item>
          <el-form-item label="图标选择：">
            <div class="btnSty">
              <span v-for="(icon,index) in icons" class="iconfont" @click.stop= "choseIcon(index)" :class="[cssStyleForm.chatboxIconType === index + 1 ? 'span-back' : '', icon]"></span>
            </div>
          </el-form-item>
          <el-form-item label="按钮位置：">
            <el-select size="mini" v-model="cssStyleForm.chatButtonLocation">
              <el-option
                v-for="item in btnOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="侧边距：" v-show="place !== 'side'">
            <el-input v-model.trim="cssStyleForm.chatButtonSideMargin" type="number" min="0" placeholder="请输入内容" max="999" @blur="blurMar('btnSideMar')" size="mini">
              <template slot="append">像素</template>
            </el-input>
          </el-form-item>
          <el-form-item label="底边距：" v-show="place !== 'bottom'">
            <el-input v-model.trim="cssStyleForm.chatButtonBottomMargin" type="number" min="0" max="500"  placeholder="请输入内容" @blur="blurMar('btnBotMar')" size="mini">
              <template slot="append">像素</template>
            </el-input>
          </el-form-item>
          <div class="title">移动端网站按钮样式</div>
          <el-form-item label="图标选择：">
            <div class="btnSty">
              <span v-for="(icon,index) in icons" class="iconfont" @click= "choseMobileIcon(index)" :class="[cssStyleForm.chatboxMobileIconType === index + 1 ? 'span-back' : '', icon]"></span>
            </div>
          </el-form-item>
          <el-form-item label="按钮位置：">
            <el-select size="mini" v-model="cssStyleForm.chatButtonMobileLocation">
              <el-option
                v-for="item in btnMobileOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="侧边距：" v-show="cssStyleForm.chatButtonMobileLocation === 'circle-right' || cssStyleForm.chatButtonMobileLocation === 'circle-left'">
            <el-input v-model.trim="cssStyleForm.chatButtonMobileSideMargin" type="number" min="0" placeholder="请输入内容" max="999" @blur="blurMar('btnSideMar')" size="mini">
              <template slot="append">像素</template>
            </el-input>
          </el-form-item>
          <el-form-item label="底边距：" v-show="cssStyleForm.chatButtonMobileLocation === 'circle-right' || cssStyleForm.chatButtonMobileLocation === 'circle-left'">
            <el-input v-model.trim="cssStyleForm.chatButtonMobileBottomMargin" type="number" min="0" max="500"  placeholder="请输入内容" size="mini">
              <template slot="append">像素</template>
            </el-input>
          </el-form-item>
          <el-form-item label="移动端按钮文案：" v-show=" cssStyleForm.chatButtonMobileLocation === 'bottom'">
            <el-input v-model.trim="cssStyleForm.onlineMobileText" size="mini"></el-input>
          </el-form-item>
        </el-form>
      </div></el-aside>
      <el-main class="main" style="border: 1px solid;padding: 0px">
        <webimDemo ref="webimDemo" :previewObj="cssStyleForm" :advList="advList"></webimDemo>
      </el-main>
    </el-container>
    <div style="clear: both"></div>
  </div>
</template>
<script>
  import webimDemo from '@/components/business-modules/merchantConfig/webOnlineServe/base/webimDemo'
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'webImWindowConfig',
    data () {
      return {
        btnOptions: [{                      //  在线咨询按钮位置列表
          label: '底边右侧按钮',
          value: 'bottom-right'
        }, {
          label: '底边左侧按钮',
          value: 'bottom-left'
        }, {
          label: '侧边右侧按钮',
          value: 'side-right'
        }, {
          label: '侧边左侧按钮',
          value: 'side-left'
        }, {
          label: '圆形右侧按钮',
          value: 'circle-right'
        }, {
          label: '圆形左侧按钮',
          value: 'circle-left'
        }],
        btnMobileOptions: [{
          label: '圆形右侧按钮',
          value: 'circle-right'
        }, {
          label: '圆形左侧按钮',
          value: 'circle-left'
        }, {
          label: '圆形悬浮按钮',
          value: 'levitate'
        }, {
          label: '底边按钮',
          value: 'bottom'
        }],
        showBack: 0,
        icons: ['icon-webchat1', 'icon-webchat', 'icon-webchat3', 'icon-webchat2', 'icon-webchat5', 'icon-webchat6', 'icon-webchat7', 'icon-webchat8', 'icon-webchat4', 'icon-webchat9', 'icon-webchat11', 'icon-webchat10'],
        colors: ['#19CAA6', '#00b45f', '#b50e03', '#f49300', '#9ec100', '#00cccd', '#5b799a', '#871F78'],
        cssStyleForm: { // 转人工设置
          btnIcon: 'icon-webchat1', // 网站设置的按钮icon
          chatButtonSideMargin: '18',   //  在线咨询按钮侧边距
          chatButtonBottomMargin: '18',
          chatButtonLocation: 'bottom-right',
          chatButtonMobileLocation: 'circle-right', // 移动按钮位置
          chatboxMobileIconType: 1,     //  在线咨询移动端按钮默认图标样式
          styleColor: '#19CAA6', // 对话框皮肤
          chatButtonMobileSideMargin: '18', // 移动侧边距
          chatButtonMobileBottomMargin: '18', // 移动底边距
          chatboxIconType: 1,           //  在线咨询按钮默认图标样式
          onlineText: '咨询客服', // 网站按钮文案
          onlineMobileText: '' // 移动端按钮文案
        }
      }
    },
    props: {
      advList: Array
    },
    components: {
      webimDemo
    },
    computed: {
      // 计算按钮的展示样式（侧边，底边，圆形）
      place () {
        let address = this.cssStyleForm.chatButtonLocation
        return address.indexOf('bottom') > -1 ? 'bottom' : address.indexOf('side') > -1 ? 'side' : 'circle'
      }
    },
    methods: {
      open (val, isAdd) {
        if (isAdd) {
          this.cssStyleForm = {
            btnIcon: 'icon-webchat1', // 网站设置的按钮icon
            chatButtonSideMargin: '18',   //  在线咨询按钮侧边距
            chatButtonBottomMargin: '18',
            chatButtonLocation: 'bottom-right',
            chatButtonMobileLocation: 'circle-right', // 移动按钮位置
            chatboxMobileIconType: 1,     //  在线咨询移动端按钮默认图标样式
            styleColor: '#19CAA6', // 对话框皮肤
            chatButtonMobileSideMargin: '18', // 移动侧边距
            chatButtonMobileBottomMargin: '18', // 移动底边距
            chatboxIconType: 1,           //  在线咨询按钮默认图标样式
            onlineText: '咨询客服', // 网站按钮文案
            onlineMobileText: '' // 移动端按钮文案
          }
        } else {
          for (let key in this.cssStyleForm) {
            this.cssStyleForm[key] = deepClone(val[key])
          }
          if (val.cssStyle) {
            for (let key in this.cssStyleForm) {
              this.cssStyleForm[key] = deepClone(val.cssStyle[key])
            }
          }
        }
      },
      // 选择按钮图标的时候触发
      choseMobileIcon (index) {
        this.cssStyleForm.chatboxMobileIconType = index + 1
      },
      blurMar (eleMargin) {
        if (eleMargin === 'btnSideMar' && ((this.cssStyleForm.chatButtonSideMargin <= 0 && this.cssStyleForm.chatButtonSideMargin + '' !== '0') || this.cssStyleForm.chatButtonSideMargin > 999)) {
          this.$message.error('在线客服按钮位置侧边距不能小于0或超过990px')
          this.cssStyleForm.chatButtonSideMargin = '18'
        }
      },
      // 选择按钮图标的时候触发
      choseIcon (index) {
        this.cssStyleForm.btnIcon = this.icons[index]
        this.cssStyleForm.chatboxIconType = index + 1
      },
      styleColorBlur () {
        let reg = /^#([0-9a-fA-F]{6})$/
        if (!reg.test(this.cssStyleForm.styleColor)) {
          this.$message.error('如果您想自定义颜色,请您输入#+6位合法颜色值')
          this.cssStyleForm.styleColor = this.colors[0]
          this.showBack = 0
          return
        }
        if (this.colors.indexOf(this.cssStyleForm.styleColor) < 0) {
          this.showBack = -1
        }
      },
      // color插件选择时触发
      colorPickChange (v) {
        if (this.colors.indexOf(v) < 0 && v) {
          this.showBack = -1
        }
        if (v === null) {
          this.$message.error('自定义颜色不能为空')
          this.cssStyleForm.styleColor = '#19CAA6'
          this.showBack = 0
          return
        }
      },
      // 选择聊天框颜色触发，通过showbaack渲染选中的颜色
      addBack (index, color) {
        this.cssStyleForm.styleColor = color
        this.showBack = index
      }
    },
    mounted () {
      this.addBack(0, '#19CAA6')
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .webim-window-config
    .left
      width: 400px;
      padding: 20px 0;
      overflow-x: hidden;
      position: relative;
      float: left;
      padding-left: 20px;
    .right
      float left
    .width-440
      width 440px
    .title
      font-weight bold
      margin 20px 0px
    .style-color-input
      width: 100px;
      margin-top: -5px;
      margin-left: 10px;
    .btnSty
      width 240px
      span
        display inline-block
        width 26px
        height 26px
        background $cf-level4
        text-align center
        line-height 26px
        margin-left 16px
        color $cf-white
        margin-bottom 12px
        cursor pointer
      :nth-child(1)
        margin-left 0
      :nth-child(7)
        margin-left 0
      .span-back
        background $c-main
  .chat_box
    width 240px
    span
      display inline-block
      width 26px
      height 26px
      border-radius 3px
      margin-left 16px
      position relative
      cursor pointer
      span
        position absolute
        top -5px
        left 5px
        color $cf-white
        font-size 16px
    :nth-child(1)
      margin-left 0
    :nth-child(7)
      margin-left 0
      margin-top 12px
    :nth-child(8)
      margin-top 12px
</style>
